<template>
  <div class="home-view">
    <div class="home-view-login">
      <div class="view-login-main">
        <div class="login-main-title">欢迎登录</div>
        <el-input
          class="login-main-input"
          placeholder="请输入账号"
          :prefix-icon="User"
          v-model="username"
        />
        <div class="login-main-password">
          <el-input
            :type="passwordVisible ? 'text' : 'password'"
            :prefix-icon="Lock"
            v-model="password"
            class="login-main-input"
            placeholder="请输入密码"
          />
          <img
            v-if="!passwordVisible"
            class="main-password-img"
            src="../assets/img/close.png"
            alt=""
            @click="passwordVisible = !passwordVisible"
          />
          <img
            v-else
            class="main-password-img"
            src="../assets/img/open.png"
            alt=""
            @click="passwordVisible = !passwordVisible"
          />
        </div>
        <el-button class="login-main-button" type="primary" @click="onLogin()"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { ref } from "vue";
import md5 from "js-md5";
import CryptoJS from "crypto-js";
import { useRouter } from "vue-router";
import API from "@/utils/api";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
const store = useStore();
const router = useRouter();
const username = ref();
const password = ref();
const passwordVisible = ref(false);
function onLogin() {
  let message =
    (!username.value && "请输入账号") || (!password.value && "请输入密码");
  if (message) return ElMessage.warning(message);
  API.user.login(
    {
      username: username.value,
      password: CryptoJS.AES.encrypt(
        password.value,
        CryptoJS.enc.Utf8.parse("123bc456de7890af"),
        { iv: CryptoJS.enc.Utf8.parse("fedc76ba54309821") }
      ).toString(),
    },
    (res) => {
      if (res.code == 0) {
        store.dispatch("updateMenuData", res.data.menus);
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("operationStatus", res.data.can_add_college);
        localStorage.setItem("new_msg", res.data.new_msg); //是否有新消息
        router.push({ path: "/home", params: {} });
      }
    }
  );
}
</script>

<style scoped lang="scss">
.home-view {
  // background: url('https://seopic.699pic.com/photo_origin/40150/3472.jpg%21bd800') no-repeat;~
  background: url("https://ym.geowin100.com/files/2024/66dabd7f118b61725611391.jpg")
    no-repeat;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  .home-view-login {
    position: relative;
    top: 27%;
    .view-login-main {
      opacity: 0.85;
      width: 30%;
      height: 290px;
      border-radius: 5px;
      background: #fff;
      z-index: 666;
      margin: 0 auto;
      .login-main-title {
        font-size: 18px;
        padding: 25px 20px 30px;
        text-align: center;
        font-weight: 600;
      }
      .login-main-input {
        padding: 10px 25px;
      }
      .login-main-button {
        margin-top: 25px;
        width: 100px;
      }
      .login-main-password {
        position: relative;
        .main-password-img {
          position: absolute;
          right: 35px;
          top: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
